<section class="grid_8" style="margin-left: 5%;width:90%"　id="winzard-wrapper">
	<div class="block-border"><div class="block-content">
		<h1>会議室予約</h1>
		
		<div class="block-controls">
			<ul class="controls-buttons">
				<li>
					<a href="#" title="次のステップ" id="next-step-btn" style="display: none;"><img src="/images/icons/fugue/navigation.png" width="16" height="16">
						次のステップ
					</a>
				</li>
			</ul>
		</div>
		
		<ol class="wizard-steps">
			<li>
				<a href="#status-bar">
					<span class="number">1</span>
					日と席の数を選択
				</a>
			</li>
			<li class="disabled">
				<span class="number">2</span>
				予約時間を選択
			</li>
			<li class="disabled">
				<span class="number">3</span>
				確認
			</li>
		</ol>
		
		<span class="number bigger">1</span>
		<small>会議室予約</small>
		<h2 class="bigger">日と席数を選択</h2>
		
		<ul class="tabs js-tabs same-height">
		    <li class="current"><a href="#tab-inday">日中</a></li>
		    <li><a href="#tab-crossday">連日</a></li>
		</ul>
 
		<div class="tabs-content">
		     
		    <div id="tab-inday">
		        <form class="form" id="order-form" method="get" action="/user/order/step2">
					<fieldset class="grey-bg inline-label">
						
						<p>
							<label for="date">予約日</label>
							<?php echo $this->formText("date", $this->date, array('class'=>'date-input'))?>
						</p>
						<p>
							<label for="name" class="strongText">席の数</label>
							<?php echo $this->formSelect("number_seat", $this->number_seat, NULL, $this->seat_number_list)?>
						</p>
					</fieldset>
					<fieldset class="grey-bg no-margin">
						<p>
							<button type="submit" disabled="disabled" id="next-btn" class="next-btn">次ステップ</button>
						</p>
					</fieldset>
				</form>
		    </div>
		     
		    <div id="tab-crossday">
		        <form class="form" id="order-form-crossday" method="get" action="/user/order/step2-crossday">
					<fieldset class="grey-bg inline-label">
						
						<p>
							<label for="date">始日</label>
							<?php echo $this->formText("start_date", $this->date, array('class'=>'date-input'))?>
						</p>
						<p>
							<label for="name" class="strongText">席の数</label>
							<?php echo $this->formSelect("number_seat", $this->number_seat, NULL, $this->seat_number_list)?>
						</p>
					</fieldset>
					<fieldset class="grey-bg no-margin">
						<p>
							<button type="submit" disabled="disabled" id="next-btn-crossday" class="next-btn">次ステップ</button>
						</p>
					</fieldset>
				</form>
		    </div>
		 
		</div>
	</div>
	</div>
</section>

<script type="text/javascript">
	$(document).ready(function(){
		$(".date-input").datepicker({ 
			dateFormat: 'yy-mm-dd',
			changeMonth: true,
			changeYear: true,
			showOn: "button",
			buttonImageOnly: true,
			buttonImage: "/images/icons/calendar.gif",
			onClose: function(dateText, inst) {
				
			}
		});


		checkDate(false);
		$("#date").change(function(){
			checkDate(true);		
		});

		checkStartDate(false);
		$("#start_date").change(function(){
			checkStartDate(true);		
		});
		
		$("html, body").animate({scrollTop: $("#status-bar").offset().top}, "slow");

		$("#next-step-btn").click(function(){
			$("#order-form").submit();
		});
	});


	function checkDate(open_dialog){   
		var today = $.datepicker.formatDate('yy-mm-dd', new Date());
		var date = $("#date").val();
		
		if(date < today){
			if(open_dialog)
				openDateErrDialog();
			$("#next-btn").attr("disabled", "disabled");
			$("#next-step-btn").css("display", "none");
				
		}else if($("#date").val() != ""){
			$("#next-btn").removeAttr("disabled");
			$("#next-step-btn").css("display", "");
		}
	}
	
	function checkStartDate(open_dialog){   
		var today = $.datepicker.formatDate('yy-mm-dd', new Date());
		var date = $("#start_date").val();
		if(date < today){
			if(open_dialog)
				openDateErrDialog();
			$("#next-btn-crossday").attr("disabled", "disabled");
			$("#next-step-btn").css("display", "none");
				
		}else if($("#start_date").val() != ""){
			$("#next-btn-crossday").removeAttr("disabled");
			$("#next-step-btn").css("display", "");
		}
	}

	function openDateErrDialog()
	{
		$.modal({
			content: $("#date-err-dialog").html(),
			title: '予約日が正しくない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}
	
</script>

<!-- Model dialog -->
<div id="date-err-dialog" style="display: none;" title="ERROR">
	<h3 style="text-align: center;">
		この日に予約できません。
	</h3>
</div>